<template>
	<view class="page-container">
		<view class="banner">
			<image class="banner-img" src="/static/images/banner.png" mode="widthFix"></image>
			<!-- <view class="reward-box flex">
				<image class="prompt-img" src="@/static/images/prompt.png"></image>
				<view class="prompt_tips">曝光上传要求与奖励</view>
			</view>
			<view class="exposure-img-box">
				<image src="@/static/images/bg.jpg"></image>
			</view> -->
		</view>
	<!-- 	<view class="exposure_head">
			<view class="exposure-kefu">
				<image src="@/static/images/kefu.jpg"></image>
			</view>
		</view> -->
		<view class="list-box">
			<template :key="item.id" v-for="item in exposedListData">
				<ExposedListItem :item="item" />
			</template>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		exposedDataRes
	} from "../../testData/exposedData";
	const exposedListData = ref([]);
	onMounted(() => {
		exposedListData.value = exposedDataRes.data.list;
		const baseURL = import.meta.env.VITE_API_BASE_URL;
		console.log(baseURL);
	})
</script>

<style scoped lang="scss">
	.page-container {
		min-height: 100%;
		background: #fafafa;
		padding-bottom: 50px;
	}

	.banner {
		.banner-img{
			width: 100%;
		}
		// background: url(/static/images/banner.png);
		// background-repeat: no-repeat;
		// background-size: cover;
		// height: 400rpx;
		// width: 100%;
		// position: relative;
		// padding-left: 12px;
		// padding-top: 150rpx;

		.reward-box {
			width: 710rpx;
			height: 116rpx;
			background: rgba(236, 236, 252, .89);
			box-shadow: 0px 4px 18px 0px rgba(3, 45, 255, .1);

			.prompt-img {
				width: 42px;
				height: 42px;
				margin-top: 10px;
			}


			.prompt_tips {
				display: flex;
				margin-top: 18px;
				// margin-left: 40px;
				font-family: Source Han Sans;
				font-weight: 500;
				font-size: 15px;
				color: #1218ba;
				line-height: 18px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.exposure-img-box {
			width: 710rpx;
			height: 148rpx;
			margin-right: 10px;
			margin-top: 8px;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.exposure_head {
		margin-top: 10px;

		.exposure-kefu {
			width: 710rpx;
			height: 148rpx;
			margin-left: 12px;
			margin-right: 10px;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.list-box {
		margin-top: 10px;
	}
</style>